<script setup lang="ts">

import PdfPage from "./PdfPage.vue";
import ImagePage from "./ImagePage.vue";
import {computed, ref} from "vue";

import {extMap} from '../../../common/constants'

const props = defineProps(['path'])

const path = computed(() => props.path)

const ext = extMap[path.value.substring(path.value.lastIndexOf(".") + 1).toLowerCase()] || 'other'

function openItem() {
  window.api.openItem(path);
}

const zoom = ref(1)

const MAX_SCALE = 4
const MIN_SCALE = 0.2

function zoomIn() {
  if (zoom.value <= MIN_SCALE) {
    return;
  }
  if (zoom.value < 1) {
    zoom.value -= 0.05
  } else {
    zoom.value -= 0.1
  }
}

function zoomOut() {
  if (zoom.value >= MAX_SCALE) {
    return;
  }
  if (zoom.value < 1) {
    zoom.value += 0.05
  } else {
    zoom.value += 0.1
  }
}

function resetZoom() {
  zoom.value = 1
}

function handleWheel(ev) {
  if (!ev.ctrlKey) {
    return
  }
  ev.preventDefault()

  if (ev.wheelDeltaY > 0) {
    zoomOut()
  } else if (ev.wheelDeltaY < 0) {
    zoomIn()
  }
}

function getZoomStr() {
  return Math.floor(zoom.value * 100) + '%'
}

const rotation = ref(0)

function shunshizhen() {
  rotation.value += 90
}

function nishizhen() {
  rotation.value -= 90
}
</script>

<template>
  <div
      style="height: 30px;align-content: center;
  background-color: var(--main-color);border-radius: 3px 3px 0 0;padding-left: 15px">
    <el-button class="btn suoxiao" @click="zoomIn" title="缩小"></el-button>
    <el-text style="margin: 0 10px;color: white" @click="resetZoom" title="重置缩放">{{ getZoomStr() }}</el-text>
    <el-button class="btn fangda" @click="zoomOut" title="放大"></el-button>
    <el-button class="btn shunshizhen" @click="shunshizhen" title="顺时针旋转"></el-button>
    <el-button class="btn nishizhen" @click="nishizhen" title="逆时针旋转"></el-button>
  </div>
  <div
      @wheel="handleWheel"
      style="height: calc(100% - 30px);overflow: auto;box-sizing: border-box;border: 1px solid #ccc;align-content: center;justify-items: center;border-radius: 0 0 3px 3px;">
    <div style="max-width: 100%;max-height: 100%" :style="{zoom}">
      <PdfPage v-if="ext=='pdf'" :path="path" :rotation="rotation"></PdfPage>
      <ImagePage v-if="ext=='image'" :path="path" :rotation="rotation"></ImagePage>
      <div v-if="ext=='other'">
        <div>暂不支持该类型文件预览</div>
        <div style="margin-top: 20px">
          <el-button link type="primary" size="large" @click="openItem">使用默认软件打开</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.btn {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px;
  background-color: transparent;
  border: none;
  width: 30px;
  cursor: default;

  &.suoxiao {
    background-image: url('../assets/images/suoxiao.svg');
  }

  &.fangda {
    background-image: url('../assets/images/fangda.svg');
  }

  &.shunshizhen {
    background-image: url('../assets/images/shunshizhen.svg');
    background-size: 22px;
  }

  &.nishizhen {
    background-image: url('../assets/images/nishizhen.svg');
    background-size: 22px;
  }

  &:hover {
    background-color: var(--main-hover-color);
  }
}
</style>